<template>
  <div class="mainSelect">
    <!-- 查询功能模块 -->
    <div class="select">
      <el-form ref="form" :model="addEmployeeName" label-width="80px">
        <el-form-item label="姓名:">
          <el-input v-model="addEmployeeName.empName" style="width: 150px" clearable @clear="selectPagination"></el-input>
        </el-form-item>
        <el-form-item label="岗位:">
          <el-input v-model="addEmployeeName.empJob" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="用工性质:">
          <el-input v-model="addEmployeeName.empType" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="入职时间:">
          <el-date-picker v-model="addEmployeeName.empHirDate" type="daterange" range-separator="至" :start-placeholder="startTimeInput" :end-placeholder="endTimeInput" style="width: 270px; margin-right: 15px">
          </el-date-picker>
        </el-form-item>
        <div style="width:400px,height:100px">
          <el-form-item>
            <el-button type="success" @click="selectEmployee">查询</el-button>
            <el-button type="primary" style="margin-left: 20px" @click="dialogFormVisible = true">上传<i class="el-icon-upload el-icon--right"></i></el-button>
            <el-button type="primary" style="margin-left: 20px" @click="download">下载当前<i class="el-icon-download el-icon--right"></i></el-button>
            <el-button type="primary" style="margin-left: 20px" @click="downloadAll">下载全部<i class="el-icon-download el-icon--right"></i></el-button>
            <!-- @click="printemp" @click="handleClick" -->
            <!-- <el-dropdown split-button type="primary" style="margin-left: 20px">
              打印<i class="el-icon-receiving el-icon--right"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item></el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
              <el-button type="primary" style="margin-left: 20px" v-print="'#Tab'"
              >打印<i class="el-icon-upload el-icon--right"></i
            ></el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 展示查询员工的信息 -->
    <!-- 列表区域 -->
    <el-table :data="tableData" id="Tab" border stripe :header-cell-style="{ color: 'black', fontSize: '18px' }">
      </el-table-column>
      <el-table-column type="index" label="序号" width="100px"></el-table-column>
      <el-table-column label="姓名" prop="empName"></el-table-column>
      <el-table-column label="岗位" prop="empJob"></el-table-column>
      <el-table-column label="项目安排" prop="empProject"></el-table-column>
      <el-table-column label="性别" prop="empSex"></el-table-column>
      <el-table-column label="户口所在地" prop="empFamiAddress"></el-table-column>
      <el-table-column label="学历" prop="empDegree"></el-table-column>
      <el-table-column label="用工性质" prop="empType"></el-table-column>
      <el-table-column label="入职时间" prop="empHirDate"></el-table-column>
      <el-table-column label="薪资（正式）" prop="empSal"></el-table-column>
      <el-table-column label="人员性格分析" prop="empPerAna"></el-table-column>
      <el-table-column label="操作" width="220px" fixed="right">
        <template slot-scope="scope">
          <!-- 转正按钮 -->
          <el-button type="primary" size="mini" @click="workerInfo(scope.row)">转正</el-button>
          <!-- 修改按钮 -->
          <el-button type="warning" size="mini" @click="editInfo(scope.row)">编辑</el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" size="mini" @click="deleteEmployee(scope.row.empStaNum)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <Pagination :total="total" :employee="employee" @getCurrentPage="getCurrentPage" @getPageSize="getPageSize" />

    <!-- 点击编辑按钮显示对应员工的信息 -->
    <el-dialog title="修改员工入职" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form :model="editEmployeeName" ref="editFormRef" label-width="70px">
        <el-form-item label="姓名">
          <el-input v-model="editEmployeeName.empName" disabled></el-input>
        </el-form-item>
        <el-form-item label="岗位">
          <el-input v-model="editEmployeeName.empJob" disabled></el-input>
        </el-form-item>
        <el-form-item label="项目安排">
          <el-input v-model="editEmployeeName.emProject"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="editEmployeeName.empSex" disabled></el-input>
        </el-form-item>
        <el-form-item label="户籍所在地">
          <el-input v-model="editEmployeeName.empFamiAddress" disabled></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input v-model="editEmployeeName.empDegree" disabled></el-input>
        </el-form-item>
        <el-form-item label="用工性质">
          <el-input v-model="editEmployeeName.empType" disabled></el-input>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-input v-model="editEmployeeName.empHirDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="薪资(正式)">
          <el-input v-model="editEmployeeName.empSal" disabled></el-input>
        </el-form-item>
        <el-form-item label="人员性格分析">
          <el-input v-model="editEmployeeName.empPerAna"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 上传 -->
    <!-- 点击上传按钮显示上传的弹框 -->
    <el-dialog title="上传文件" :visible.sync="dialogFormVisible" width="30%" center @close="uploadDialogClosed">
      <el-upload drag style="margin-left: 100px" class="upload-demo" ref="upload" accept=".xlsx, .xlsm, .xls" :auto-upload="false" action="#" :limit="1" :file-list="fileList" :on-change="handleChange" :on-exceed="handleExceed">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleImportExcel" :disabled="uploading">确定导入</el-button>
        <el-button @click="cancle">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import data4 from "../json/dataTable4.json";
export default {
  name: 'EmployeeEntryList',
  mounted () {
    // 页面一加载就获取所有员工的信息
    // this.tableData = this.employee.slice(0, this.pageSize);
    this.selectPagination()
  },
  data () {
    return {
      employee: [],
      total: 0,
      tableData: [],
      pageSize: 4,
      currentPage: 1,
      addEmployeeName: {
        empId: '',
        empStaNum: '',
        empJob: '',
        emProject: '',
        empSex: '',
        empFamiAddress: '',
        empDegree: '',
        empType: '',
        empHirDate: '',
        empSal: '',
        empPerAna: ''
      },
      editEmployeeName: {
        empId: '',
        empStaNum: '',
        empJob: '',
        emProject: '',
        empSex: '',
        empFamiAddress: '',
        empDegree: '',
        empType: '',
        empHirDate: '',
        empSal: '',
        empPerAna: ''
      },
      table: ['实习', '试用', '转正', '离职'],
      title: '添加入职员工的信息',
      // 控制添加弹窗的显示与隐藏，当点击添加按钮是值变为true
      editDialogVisible: false,
      startTimeInput: '开始日期',
      endTimeInput: '结束日期',
      startTime: '',
      endTime: '',
      dialogFormVisible: false,
      fileList: [], // 文件列表
      file: {},
      uploading: true // 默认置灰确定导入按钮
    }
  },
  methods: {
    // printemp () {
    //   const tables = this.tableData.filter(item => item.empId == this.selectedIds)
    //   console.log(tables)
    //   window.print(tables)
    // },
    // 下载全部
    downloadAll () {
      this.$api.employeeEntry.downloadAllEmployee().then((res) => {
        // console.log(res)
        const fileName = 'one.xls'
        const elink = document.createElement('a')
        if ('download' in elink) {
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = window.URL.createObjectURL(res.data)
          document.body.appendChild(elink)
          elink.click()
          window.URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        } else {
          navigator.msSaveBlob(Blob, fileName)
        }
      })
    },
    // 下载当前
    download () {
      this.$api.employeeEntry
        .downloadEmployee(this.currentPage, this.pageSize)
        .then((res) => {
          // console.log(res)
          const fileName = 'one.xls'
          const elink = document.createElement('a')
          if ('download' in elink) {
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = window.URL.createObjectURL(res.data)
            document.body.appendChild(elink)
            elink.click()
            window.URL.revokeObjectURL(elink.href)
            document.body.removeChild(elink)
          } else {
            navigator.msSaveBlob(Blob, fileName)
          }
        })
    },
    // 分页查询请求数据
    selectPagination () {
      this.$api.employeeEntry
        .postEmployeeEntry(this.currentPage, this.pageSize)
        .then((res) => {
          // console.log(res)
          if (res.data.code == 200) {
            const data = res.data.data
            this.employee = data.records
            this.tableData = data.records
            console.log(this.tableData)
            this.total = data.total
            this.tableData = data.records.map((item) => {
              item.empType = this.table[item.empType]
              return item
            })
          }
        })
    },
    // getCurrentPage 获取分页组件中传递过来的当前页page
    getCurrentPage (currentPage, pageSize) {
      this.currentPage = currentPage
      this.pageSize = pageSize
      this.selectPagination()
    },
    // getPageSize   获取分页组件传递过来的每页显示多少条数据
    getPageSize (currentPage, pageSize) {
      this.currentPage = currentPage
      this.pageSize = pageSize
      this.selectPagination()
    },
    // 转正
    async workerInfo (data) {
      const result = await this.$api.employeeEntry.updataEmployee(data)
      console.log(result)
      if (result.data.code == 200) {
        this.$message.success('转正成功！')
      } else {
        return this.$message.error('转正失败！')
      }
      this.selectPagination()
    },
    // 点击编辑按钮显示编辑的信息
    editInfo (data) {
      this.editDialogVisible = true
      this.editEmployeeName = data
      this.editEmployeeName.empType = '1'
    },
    // 点击删除按钮删除员工信息
    async deleteEmployee (id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const result = await this.$api.employeeEntry.deleteEmployee(id)
      // console.log(result)
      // const result = await this.$http.delete('users/' + id)
      if (result.data.code == 200) {
        this.$message.success('删除成功！')
      } else {
        return this.$message.error('删除失败！')
      }
      this.selectPagination()
    },
    // 编辑完员工的信息后，发生请求
    editUserInfo () {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return
        // 发起修改用户信息的数据请求
        const result = await this.$api.employeeEntry.updateEmployee(this.editEmployeeName)
        if (result.data.code == 200) {
          // 关闭对话框
          this.editDialogVisible = false
          // 刷新数据列表
          this.selectEmployee()
          // 提示修改成功
          this.$message.success('更新用户信息成功！')
        } else {
          this.$message.error('更新员工信息失败')
        }
      })
    },
    // 监听修改用户对话框的关闭事件
    editDialogClosed () {
      this.$refs.editFormRef.resetFields()
    },
    // 查询
    async selectEmployee () {
      const ename = this.addEmployeeName.empName.trim()
      if (ename == '') {
        this.selectPagination()
      } else {
        const result = await this.$api.employeeEntry.getEmployeeEntryList(
          this.addEmployeeName.empName
        )
        // console.log(result)
        if (result.data.code == 200) {
          this.tableData = result.data.data
        }
      }
    },
    // 文件状态改变触发
    handleChange (file) {
      // (file,fileList)参数
      this.uploading = false
      this.file = file
    },
    // 文件超出个数限制
    handleExceed () {
      this.$message.warning('仅允许上传一个文件！')
    },
    // 移除文件
    handleRemove () {
      this.uploading = true
    },
    // 取消
    cancle () {
      this.file = {}
      this.fileList = []
      this.dialogFormVisible = false
      this.uploading = true
    },
    // 导入excel上传
    async handleImportExcel () {
      if (!this.file.size) {
        this.$message.warning('请选择上传的文件')
        return
      }
      this.uploading = true
      const formData = new FormData()
      formData.append('file', this.file.raw)
      const result = await this.$api.employeeEntry.uploadEmployeeEntry(formData)
      console.log(result)
      if (result.status == 200) {
        if (result.data === 'success') {
          this.$message.warning('上传成功')
        } else {
          this.$message.error('数据有误，请重新上传excel')
          const fileName = 'one.xls'
          const elink = document.createElement('a')
          if ('download' in elink) {
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = window.URL.createObjectURL(result.data)
            document.body.appendChild(elink)
            elink.click()
            window.URL.revokeObjectURL(elink.href)
            document.body.removeChild(elink)
          } else {
            navigator.msSaveBlob(Blob, fileName)
          }
        }
        this.dialogFormVisible = false
        this.selectPagination()
      }
    },
    // 关闭重置upload弹框
    uploadDialogClosed () {
      this.$refs.upload.clearFiles()
    }
  }
}
</script>

<style scoped lang="less">
.el-table {
  opacity: 0.6;
  color: black;
  // font-weight: 700;
  font-size: 16px;
  .el-table-column {
    color: black;
  }
}
.select {
  .el-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      flex: 1;
    }
    .el-form-item:nth-child(5) {
      flex: 5;
    }
  }
}
.el-input {
  width: 85px;
  height: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
.el-dialog {
  transform: translate(-50%, 50%);
  .el-form {
    display: flex;
    flex-wrap: wrap;
    padding-right: 40px;
    .el-form-item {
      flex: 1;
      .el-input {
        width: 240px;
      }
    }
  }
}
</style>
